<!-- 通知管理 -->
<template>
  <el-form :model="form" :inline="true">
    <el-form-item label="任务名称">
      <el-input v-model="form.name" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getSeachList"
        ><el-icon><Search /></el-icon> 搜索
      </el-button>
      <el-button @click="rest"
        ><el-icon><Refresh /></el-icon> 重置
      </el-button>
    </el-form-item>
  </el-form>

  <el-row :gutter="10">
    <el-col :span="1.5">
      <el-button type="primary" plain size="mini" @click="addNotification" :disabled="buttonshow"
        ><el-icon><Plus /></el-icon> 新增通知
      </el-button>
      <!-- <el-button type="primary" plain size="mini" @click="aaa" :disabled="buttonshow"
        ><el-icon><Plus /></el-icon> ddd
      </el-button> -->
    </el-col>
  </el-row>

  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%; margin-top: 10px"
    show-overflow-tooltip
  >
    <el-table-column type="selection" />
    <el-table-column property="name" label="任务名称" align="center" />
    <el-table-column property="notificationContact" label="通知联系人" align="center">
      <template #default="scope">
        <span v-for="(item, index) in scope.row.notificationContact" :key="index">
          {{ displayRuleText(item) }}
        </span>
      </template>
    </el-table-column>
    <el-table-column property="id" label="通讯方式" align="center">
      <template #default="scope">
        <span v-for="(item, index) in JSON.parse(scope.row.communicationMethod)" :key="index">
          {{ displayRuleText1(item) }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="状态" align="center">
      <template v-slot="scope">
        <el-switch
          v-model="scope.row.status"
          @click="changeEvent(scope.row)"
          inline-prompt
          active-text="使用中"
          inactive-text="未使用"
          active-value="ALERT_OPEN"
          inactive-value="ALERT_CLOSE"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-link
          :underline="false"
          @click="changeNotification(scope.row)"
          style="margin-right: 10px"
          >修改</el-link
        >
        <el-link :underline="false" @click="delNotification(scope.row.id)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    style="float: right"
    v-model="currentPage"
    :total="total"
    :page-size="pageSize"
    @current-change="handleCurrentChange"
  ></el-pagination>
  <addNotification ref="Notification" @update="GetNewList"></addNotification>
</template>
<script>
import { ref, defineComponent, onMounted, computed } from 'vue'
import addNotification from './addNotification.vue'
import { ElMessage } from 'element-plus'
import until from '../../until/csUntil/Alent'
import Notificationname from '../../MyJson/Notification.json'

export default defineComponent({
  components: {
    addNotification
  },
  setup(_, { emit }) {
    // 计算页面 联系人
    const displayRuleText = computed(() => {
      return (judgeValue, index) => {
        const rule = contactList.value.find((item) => item.id === judgeValue)
        return rule ? `${rule.contactName}-` : ''
      }
    })
    // 计算页面通讯方式
    const displayRuleText1 = computed(() => {
      return (judgeValue, index) => {
        const rule = Notificationname.find((item) => item.value === judgeValue)
        return rule ? `${rule.label}-` : ''
      }
    })
    // 页面初始化 加载数据
    onMounted(() => {
      getSeachList()
      const res = window.api.listContact()
      contactList.value = JSON.parse(res)
    })
    // 通知联系人数组
    const contactList = ref(null)
    // 搜索框
    const form = ref({ name: '' })
    // 中间table表格内容
    const tableData = ref([])
    // 添加任务的 实例对象
    const Notification = ref(null)

    // 多少页
    const page = ref(0)
    // 一页多少条
    const pagesize = ref(10)
    // 当前页数
    const currentPage = ref(null)
    // 总条数
    const total = ref(null)
    //  每页显示的条目数
    const pageSize = ref(null)
    // 总页数
    const totalPage = ref(null)
    //
    //
    //
    //
    //
    // 搜索 页面 切换页面 分页
    const handleCurrentChange = (newPage) => {
      page.value = newPage - 1
      getSeachList()
    }

    // 更新数据
    const getSeachList = () => {
      let seachchange = {}
      if (form.value.name) {
        seachchange.name = form.value.name
        newlist(until.seachList(seachchange, page.value, pagesize.value))
      } else {
        rest()
      }
    }

    // 更新数据
    const newlist = (res) => {
      tableData.value = res.Searchlist
      currentPage.value = res.totalList.currentPage
      pageSize.value = res.totalList.pageSize
      total.value = res.totalList.total
      totalPage.value = res.totalList.totalPage
    }
    // 重置
    const rest = () => {
      form.value = { name: '' }
      newlist(until.seachList({}, page.value, pagesize.value))
    }

    // 修改通知
    const changeNotification = (data) => {
      const res = window.api.getAlertById(data.id)
      Notification.value.form = JSON.parse(res)
      Notification.value.dialogVisible = true
      Notification.value.notificationContactList = contactList.value
      Notification.value.IsChange = true
      Notification.value.changeExecutionPolicy()
      Notification.value.dddd()
    }
    // 删除通知
    const delNotification = (id) => {
      const res = window.api.removeAlert(id)
      if (res === '删除成功') {
        ElMessage.success(res)
        rest()
      } else {
        ElMessage.error(res)
      }
    }
    // 新增通知
    const addNotification = () => {
      Notification.value.dialogVisible = true
      Notification.value.notificationContactList = contactList.value
    }
    // 更新数据
    const GetNewList = () => {
      rest()
    }

    const aaa = () => {
      const res = window.api.listAlert()
    }

    const changeEvent = (data) => {
      const res = window.api.changeAlertStatus(data.id, data.status)
      if (res === '修改成功') {
        ElMessage.success(res)
      } else {
        ElMessage.error(res)
      }
    }
    return {
      form,
      tableData,
      Notification,
      page,
      pagesize,
      currentPage,
      total,
      pageSize,
      totalPage,
      contactList,
      newlist,
      rest,
      changeNotification,
      delNotification,
      addNotification,
      handleCurrentChange,
      getSeachList,
      aaa,
      GetNewList,
      changeEvent,
      displayRuleText,
      displayRuleText1
    }
  }
})
</script>

<style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
</style>